<script setup lang='ts'>
import {
  Fold,
  Menu as IconMenu,
  HomeFilled,
  User,
  Expand
} from '@element-plus/icons-vue'
import { onMounted, ref, watchEffect, reactive, type Ref, watch } from 'vue';
import { useRoute, useRouter, type RouteLocationMatched } from 'vue-router';
import { useCounterStore } from '@/stores/counter';
const router = useRouter()
const route = useRoute()

const counterStore = useCounterStore() //使用pinia
let checkedkeys = counterStore.checkedkeys
console.log('checkedkeys: ', checkedkeys);
// 左侧导航
const activeIndex = ref(route.path)
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const isCollapse = ref(false)

// 退出
function quit() {
  router.replace('/login')
  sessionStorage.removeItem('token')
}

// 面包屑导航
const navList: Ref<RouteLocationMatched[]> = ref([])
const getBreadCom = () => {
  let mached = route.matched.filter(item => item.meta.title)
  navList.value = mached

  // 第一个路径如果不是首页，需要在匹配路径前面拼接一个首页
  // const first = mached[0]
  // if (first.path != "/dashboard") {
  //   mached = [{ path: '/dashboard', meta: { title: '首页' } } as any].concat(mached)
  // }

}
// 监听路径的改变
watch(() => route.path, () => {
  getBreadCom()
  activeIndex.value = route.path
}, { immediate: true })

</script>
<template>
  <div class="common-layout">
    <el-container>
      <!-- 左侧导航栏 -->
      <el-aside width="auto">
        <el-row class="tac">
          <el-col>
            <el-menu :router="true" :collapse="isCollapse" :unique-opened="true" text-color="#a6adb4"
              active-text-color="#fff" background-color="#001529" :default-active="activeIndex"
              class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
              <h5 class="logo">
                <img src="http://121.89.205.189:3000/haigoureact/static/media/logo.6ce24c58.svg">
                <span class="logoname">
                  HAIGOU_ADMIN
                </span>
              </h5>
              <template v-for="item in checkedkeys">
                <template v-if="!item.children">
                  <el-menu-item :index="item.path" v-show="!isCollapse">
                    <template #title>
                      <el-icon>
                        <HomeFilled />
                      </el-icon>
                      <span>{{ item.meta!.title }}</span>
                    </template>
                  </el-menu-item>
                  <el-sub-menu :index="item.path" v-show="isCollapse">
                    <template #title>
                      <el-icon>
                        <HomeFilled />
                      </el-icon>
                    </template>
                    <el-menu-item :index="item.path">
                      <el-icon>
                        <Expand />
                      </el-icon>
                      {{ item.meta!.title }}
                    </el-menu-item>
                  </el-sub-menu>
                </template>

                <!-- ===================================================== -->
                <template v-else>
                  <el-sub-menu :index="item.path">
                    <template #title>
                      <el-icon>
                        <IconMenu />
                      </el-icon>
                      <span>{{ item.meta!.title }}</span>
                    </template>

                    <el-menu-item v-for="subitem in item.children" :index="subitem.path">
                      <el-icon>
                        <Expand />
                      </el-icon>
                      <span>{{ subitem.meta!.title }}</span>
                    </el-menu-item>

                  </el-sub-menu>
                </template>
              </template>

            
            </el-menu>
          </el-col>
        </el-row>
      </el-aside>

      <!-- 右侧内容 -->
      <el-container>
        <!-- 头部 -->
        <el-header>
          <div class="header-left">
            <el-icon v-show="isCollapse" @click="isCollapse = false">
              <Expand />
            </el-icon>
            <el-icon v-show="!isCollapse" @click="isCollapse = true">
              <Fold />
            </el-icon>
          </div>
          <div class="userset">
            <el-popover placement="bottom" trigger="click">
              <template #reference>
                <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
              </template>
              <!-- <template #default> -->
              <section>设置</section>
              <section @click="quit">退出</section>
              <!-- </template> -->
            </el-popover>
          </div>
        </el-header>
        <!-- 面包屑导航 -->
        <nav>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item v-for="item in navList" :to="{ path: item.path }">{{ item.meta.title }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </nav>
        <!-- 内容 -->
        <el-main>
          <router-view>

          </router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<style scoped>
.common-layout {
  padding: 0 16px;
}

.logo {
  min-width: 10px;
  height: 32px;
  margin: 16px;
  background: hsla(0, 0%, 100%, .3);
  overflow: hidden;
}

.logo>img {
  width: 32px;
  height: 32px;
  margin: 0px 8px 0px 0px;
  vertical-align: middle;
}

.logoname {
  color: #fff;
  font-weight: 700;
  vertical-align: middle;
  font-size: 13px;
}

.common-layout {
  height: 100%;
}

.el-container {
  height: 100%;
}

/* 侧边 */
.el-aside {
  background: #001529;
}

.el-row {
  height: 100%;
  overflow: hidden;
}

.el-menu {
  height: 100%;
  border: 0;
}


.el-container {
  background-color: #f0f2f5;
}

/* 头部 */
.el-header {
  height: 64px;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.el-header .header-left .el-icon {
  transform: scale(1.5);
  cursor: pointer;
}

.el-header .userset .el-icon {
  transform: scale(1.2);
  cursor: pointer;
  background-color: #ccc;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  color: white;
}

.el-header .header-left .el-icon :hover {
  color: #1890ff;
}

.el-popover section {
  padding: 10px;
  text-align: center;
  cursor: pointer;
}

.el-popover section:hover {
  background-color: #efefef;
}

/* 导航 */
nav {
  font-size: 14px;
  margin: 15px 16px;
}

/* nav span {
  color: #1890ff;
} */

.el-main {
  background-color: white;
  margin: 0px 16px 24px;
  padding: 24px;
  min-height: 280px;
  overflow: auto;
}

.el-sub-menu .el-menu-item {
  background-color: #000c17;
}

.el-menu-item :hover {
  color: white;
}

.el-sub-menu :hover {
  color: white;
}

.el-menu-item.is-active {
  background-color: #1890ff;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>